<template>
  <div>
    <div class="navbar">
      <navbar></navbar>
    </div>
    <div class="edit-input">
      <div class="uploadfile">
        <van-uploader class="uploadimg" preview-size="100vw" :after-read="afterRead"></van-uploader>
        <edit-info-input left="头像">
          <van-image v-if="userData.user_img" round :src="userData.user_img" slot="right"/>
          <van-image v-else round :src="require('@/assets/default_photo.png')" slot="right"/>
        </edit-info-input>
      </div>
      <edit-info-input left="昵称" @bannerClick="DialogName = true">
        <a href="#" slot="right">{{ userData.name }}</a>
      </edit-info-input>
      <edit-info-input left="账号">
        <a href="#" slot="right">{{ userData.username }}</a>
      </edit-info-input>
      <edit-info-input left="性别" @bannerClick="DialogGender = true">
        <a href="#" slot="right">{{ Number(userData.gender) === 1 ? '男' : '女' }}</a>
      </edit-info-input>
      <edit-info-input left="个性签名" @bannerClick="DialogDescribe = true">
        <a v-if="userData.user_desc" href="#" slot="right">{{ userData.user_desc }}</a>
        <a v-else href="#" slot="right">这家伙太懒了，还没有设置</a>
      </edit-info-input>
    </div>
    <div class="edit-back">
      <van-button type="primary" @click="$router.push('/userinfo')">返回个人中心</van-button>
    </div>
    <!--    修改昵称弹窗-->
    <van-dialog v-model="DialogName" title="昵称" show-cancel-button @confirm="nameConfirm"
                @cancel="DialogNameContent=''">
      <van-field v-model="DialogNameContent" autofocus></van-field>
    </van-dialog>
    <!--    修改个性签名弹窗-->
    <van-dialog v-model="DialogDescribe" title="个性签名" show-cancel-button @confirm="describeConfirm"
                @cancel="DialogDescribeContent=''">
      <van-field v-model="DialogDescribeContent" type="textarea" autofocus></van-field>
    </van-dialog>
    <!--    修改性别弹窗-->
    <van-action-sheet v-model="DialogGender" :actions="actions" @select="onSelect" cancel-text="取消"/>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar'
import EditInfoInput from '@/components/user/EditInfoInput'

export default {
  name: 'Editinfo',
  data () {
    return {
      userData: {},
      // 修改信息弹窗默认状态
      DialogName: false,
      DialogDescribe: false,
      DialogGender: false,
      DialogNameContent: '',
      DialogDescribeContent: '',
      actions: [{
        name: '男',
        val: 1
      }, {
        name: '女',
        val: 0
      }]
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 获取用户个人信息
    async getUserInfo () {
      const res = await this.$http.get('/user/' + window.sessionStorage.getItem('id'))
      console.log(res)
      if (res.status === 200) {
        this.userData = res.data[0]
      } else {
        this.$msg.fail('用户信息获取失败')
      }
    },
    // 上传头像
    async afterRead (file) {
      console.log(file)
      const fromdata = new FormData()
      fromdata.append('file', file.file)
      const res = await this.$http.post('/upload', fromdata)
      console.log(res)
      if (res.status === 200) {
        this.userData.user_img = res.data.url
        this.userUpdate()
      } else {
        this.$msg.fail('用户信息获取失败')
      }
    },
    // 用户信息保存
    async userUpdate () {
      const res = await this.$http.post('/update/' + this.userData.id, this.userData)
      console.log(res)
      if (res.status === 200) {
        this.$msg.success('用户信息更新成功')
      } else {
        this.$msg.fail('用户信息获取失败')
      }
    },
    // 修改昵称对话框确认
    nameConfirm () {
      this.userData.name = this.DialogNameContent
      this.userUpdate()
      this.DialogNameContent = ''
    },
    // 修改个性签名对话框确认
    describeConfirm () {
      this.userData.user_desc = this.DialogDescribeContent
      this.userUpdate()
      this.DialogDescribeContent = ''
    },
    // 点击选择性别
    onSelect (data) {
      console.log(data)
      this.userData.gender = data.val
      this.userUpdate()
      this.DialogGender = false
    }
  },
  components: {
    Navbar,
    EditInfoInput
  }
}
</script>

<style lang="less" scoped>
.navbar {
  padding-bottom: 0.3125rem;
}

.edit-input {
  .uploadfile {
    position: relative;
    overflow: hidden;

    .uploadimg {
      position: absolute;
      opacity: 0;
    }
  }

  .van-image--round {
    width: 0.833rem;
    height: 0.833rem;
  }

  a {
    color: gray;
  }
}
.edit-back{
  margin-top: 0.3125rem;
  display: flex;
  justify-content: center;
  .van-button{
    width: 8.333rem;
    height: 1.042rem;
  }
}
</style>
